<template>
  <div class="input-box">
      <input type="text" placeholder="输入任务名称" v-model="taskName"> 
      <span @click="handleClick">新增</span>
  </div>
</template>

<script setup>

import { ref,defineEmits } from 'vue'

//定义响应式数据
var taskName = ref('');

//1.声明emit
var emit = defineEmits(['fn'])

var handleClick = ()=>{
    //2.触发事件'fn',并传值(将输入框中输入的值传给父组件)
    emit('fn',taskName)
}

</script>

<style scoped>
.input-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.input-box input{
    flex: 1;
    height: 40px;
    border: none;
    outline: none;
    padding-left: 20px;
    background-color: #f5f5f5;
}
.input-box span{
    width: 60px;
    text-align: center;
    color: lightseagreen;
}
</style>